Angular Material এর MatTree কম্পোনেন্ট একটি অত্যন্ত কার্যকরী উপাদান, যা হায়ারার্কিক্যাল ডেটা বা ডেটা যেটি একটি গাছ (tree) স্ট্রাকচারে সাজানো থাকে, তা প্রদর্শন করার জন্য ব্যবহৃত হয়। এটি সাধারণত ফাইল সিস্টেম, ন্যাভিগেশন মেনু বা হায়ারার্কিক্যাল ডেটার মতো ভিউ তৈরির জন্য ব্যবহার করা হয়।

Angular Material এর MatTree কম্পোনেন্টটি খুবই কাস্টমাইজেবল এবং এটি সহজেই ট্রি নোডস, ড্র্যাগ-এন্ড-ড্রপ ফিচার, পেজিনেশন, ফিল্টারিং, আইকন ব্যবহারের সুবিধা সরবরাহ করে।

Angular Material Tree তৈরি করার জন্য পদক্ষেপ

১. প্রয়োজনীয় মডিউল ইমপোর্ট করা

প্রথমে, MatTreeModule এবং MatIconModule মডিউলগুলো আপনার app.module.ts ফাইলে ইমপোর্ট করতে হবে:

import { MatTreeModule } from '@angular/material/tree';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
  imports: [
    MatTreeModule,
    MatIconModule,
  ]
})
export class AppModule {}

২. HTML টেমপ্লেটে ট্রি তৈরি করা

MatTree কম্পোনেন্টের মাধ্যমে একটি সাধারণ ট্রি তৈরি করা যেতে পারে। নিচে এর একটি উদাহরণ দেওয়া হলো:

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
    <li class="mat-tree-node">
      <button mat-icon-button disabled>
        <mat-icon *ngIf="node.children?.length">{{node.expandable ? 'expand_more' : 'chevron_right'}}</mat-icon>
      </button>
      {{node.name}}
    </li>
  </mat-tree-node>

  <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodeToggle>
    <li class="mat-tree-node">
      <button mat-icon-button [attr.aria-label]="'Toggle ' + node.name" (click)="toggleNode(node)">
        <mat-icon *ngIf="node.expandable">{{node.expandable ? 'expand_more' : 'chevron_right'}}</mat-icon>
      </button>
      {{node.name}}
    </li>
  </mat-tree-node>
</mat-tree>

এখানে, mat-tree-node উপাদান ব্যবহার করে ট্রী নোড তৈরি করা হয়েছে। node.expandable চেক করে, যদি নোডে children থাকে তবে এটি "expand" বা "collapse" আইকন দেখাবে।

৩. টাইপস্ক্রিপ্ট ফাইলে ট্রি কনফিগারেশন

MatTree কম্পোনেন্টের কাজ করার জন্য, TreeControl এবং DataSource কনফিগার করা প্রয়োজন।

import { Component, OnInit } from '@angular/core';
import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
import { FlatTreeControl } from '@angular/cdk/tree';

// নোডের ধরণ
export interface TreeNode {
  name: string;
  children?: TreeNode[];
}

// ফ্ল্যাট নোডের ধরণ
export interface FlatTreeNode {
  expandable: boolean;
  name: string;
  level: number;
}

@Component({
  selector: 'app-tree',
  templateUrl: './tree.component.html',
  styleUrls: ['./tree.component.css']
})
export class TreeComponent implements OnInit {

  treeControl: FlatTreeControl<FlatTreeNode>;
  dataSource: MatTreeFlatDataSource<TreeNode, FlatTreeNode>;

  constructor() {
    const treeFlattener = new MatTreeFlattener(
      this.transformer, 
      this.getLevel, 
      this.isExpandable, 
      this.getChildren
    );

    this.treeControl = new FlatTreeControl<FlatTreeNode>(this.getLevel, this.isExpandable);
    this.dataSource = new MatTreeFlatDataSource(this.treeControl, treeFlattener);
  }

  ngOnInit() {
    const TREE_DATA: TreeNode[] = [
      {
        name: 'Fruit',
        children: [
          { name: 'Apple' },
          { name: 'Orange' },
          { name: 'Banana' }
        ]
      },
      {
        name: 'Vegetables',
        children: [
          { name: 'Tomato' },
          { name: 'Lettuce' },
          { name: 'Carrot' }
        ]
      }
    ];

    this.dataSource.data = TREE_DATA;
  }

  // নোডে children এক্সেস করা
  private transformer = (node: TreeNode, level: number) => {
    return {
      expandable: !!node.children && node.children.length > 0,
      name: node.name,
      level: level
    };
  }

  // নোডের স্তর নির্ধারণ করা
  private getLevel = (node: FlatTreeNode) => node.level;

  // নোড এক্সপ্যান্ডেবল কিনা তা চেক করা
  private isExpandable = (node: FlatTreeNode) => node.expandable;

  // নোডের children পাওয়ার জন্য
  private getChildren = (node: TreeNode): TreeNode[] => node.children;
  
  hasChild = (_: number, node: FlatTreeNode) => node.expandable;
}

• TreeControl: এটি ট্রির জন্য কন্ট্রোলিং লজিক সরবরাহ করে, যেমন একটি নোড এক্সপ্যান্ড করা বা কলাপস করা।
• MatTreeFlatDataSource: এটি ডেটা এবং ট্রি কন্ট্রোলের মধ্যে সংযোগ স্থাপন করে।
• MatTreeFlattener: এটি ট্রী ডেটাকে ফ্ল্যাট করে এবং তার পরে উপযুক্ত তথ্য প্রক্রিয়া করে।

৪. স্টাইলিং

ট্রী কনট্রোল এবং ট্রি নোডের মধ্যে স্টাইলের পরিবর্তন করতে আপনি CSS বা SCSS ব্যবহার করতে পারেন:

.mat-tree-node {
  list-style-type: none;
}

.mat-tree-node mat-icon {
  margin-right: 8px;
}

button.mat-icon-button {
  width: 24px;
  height: 24px;
}

এটি ট্রী নোডের মধ্যে আইকন এবং স্পেসিংকে কাস্টমাইজ করবে।

ড্র্যাগ-এন্ড-ড্রপ ফিচার

MatTree কম্পোনেন্টে Angular CDK এর ড্র্যাগ-এন্ড-ড্রপ ফিচার ব্যবহারের মাধ্যমে আপনি ট্রী নোডগুলোকে ড্র্যাগ এবং ড্রপ করতে পারবেন। এর জন্য DragDropModule ইমপোর্ট এবং কনফিগারেশন করতে হবে।

উদাহরণ:

import { DragDropModule } from '@angular/cdk/drag-drop';

এটি আপনার app.module.ts ফাইলে ইমপোর্ট করুন এবং ট্রী নোডে ড্র্যাগ-এন্ড-ড্রপ কার্যকারিতা যোগ করুন।

Angular Material Tree কম্পোনেন্ট হায়ারার্কিক্যাল ডেটা প্রদর্শন করার জন্য একটি শক্তিশালী এবং কাস্টমাইজেবল টুল। এটি ডেটার স্তর, এক্সপ্যান্ডেবল নোডস, ড্র্যাগ-এন্ড-ড্রপ, এবং আইকন সাপোর্ট সহ অনেক ফিচার প্রদান করে। আপনি TreeControl এবং DataSource ব্যবহার করে ডেটা ম্যানেজমেন্ট করতে পারেন, এবং Angular Material এর অন্যান্য ফিচার যেমন আইকন, পেজিনেশন, এবং ফিল্টারিং ব্যবহার করে আরো ইন্টারঅ্যাকটিভ এবং সুন্দর ট্রি ভিউ তৈরি করতে পারেন।

Angular Material এর MatTree কম্পোনেন্ট হায়ারার্কিক্যাল ডেটা বা ট্রি-স্ট্রাকচারযুক্ত ডেটা প্রদর্শন করতে ব্যবহৃত হয়। এটি একটি গাছের মতো স্ট্রাকচার তৈরি করে, যেখানে প্রতিটি নোড এক্সপ্যান্ডেবল বা কলাপ্সযোগ্য হতে পারে এবং উপরের স্তর থেকে নিচে ডেটা দেখতে এবং ম্যানেজ করতে সহায়তা করে। Material Tree সাধারণত ফাইল সিস্টেম, মেনু, বা ন্যাভিগেশন ডেটা দেখানোর জন্য ব্যবহৃত হয়, যেখানে ডেটার একাধিক স্তর থাকে।

Angular Material এর MatTree কম্পোনেন্টটি অত্যন্ত কাস্টমাইজেবল এবং এতে অনেক উন্নত ফিচার যেমন ড্র্যাগ-এন্ড-ড্রপ, ইন্টারঅ্যাকটিভ এক্সপ্যান্ডেবল নোডস, এবং টেমপ্লেট কাস্টমাইজেশন রয়েছে।

MatTree এর বৈশিষ্ট্য

• এলার্কিক্যাল ডেটা: ডেটা একটি গাছের মতো স্তরে সাজানো থাকে।
• এক্সপ্যান্ডেবল এবং কলাপ্সযোগ্য নোড: প্রতিটি নোড এক্সপ্যান্ড বা কলাপ্স করা যেতে পারে।
• ড্র্যাগ-এন্ড-ড্রপ সাপোর্ট: নোডগুলোকে ড্র্যাগ এবং ড্রপ করা যেতে পারে।
• কাস্টম আইকন সাপোর্ট: প্রতিটি নোডের জন্য আইকন ব্যবহার করা যায়।
• লেজি লোডিং: বড় ডেটাসেটের জন্য লেজি লোডিং সুবিধা।

Material Tree তৈরি করার জন্য পদক্ষেপ

১. প্রয়োজনীয় মডিউল ইমপোর্ট করা

প্রথমে, MatTreeModule, MatIconModule, এবং MatButtonModule আপনার app.module.ts ফাইলে ইমপোর্ট করতে হবে।

import { MatTreeModule } from '@angular/material/tree';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  imports: [
    MatTreeModule,
    MatIconModule,
    MatButtonModule
  ]
})
export class AppModule {}

২. HTML টেমপ্লেটে ট্রি কম্পোনেন্ট ব্যবহার করা

Angular Material এর MatTree কম্পোনেন্টে ডেটা প্রদর্শন করতে নিচে একটি উদাহরণ দেওয়া হলো:

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
    <li>
      <button mat-icon-button disabled>
        <mat-icon *ngIf="node.children?.length">{{node.expandable ? 'expand_more' : 'chevron_right'}}</mat-icon>
      </button>
      {{node.name}}
    </li>
  </mat-tree-node>

  <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodeToggle>
    <li>
      <button mat-icon-button (click)="toggleNode(node)">
        <mat-icon *ngIf="node.expandable">{{node.expandable ? 'expand_more' : 'chevron_right'}}</mat-icon>
      </button>
      {{node.name}}
    </li>
  </mat-tree-node>
</mat-tree>

এখানে:

• mat-tree-node: এটি প্রতিটি গাছের নোড (node) নির্দেশ করে।
• mat-icon: আইকন যোগ করার জন্য ব্যবহৃত হয় (যেমন, এক্সপ্যান্ড বা কলাপ্স আইকন)।
• matTreeNodeToggle: এটি নোড এক্সপ্যান্ড/কলাপ্স করার জন্য ব্যবহৃত হয়।

৩. টাইপস্ক্রিপ্ট ফাইলে ট্রি কনফিগারেশন

এখন, TreeControl এবং DataSource কনফিগার করা প্রয়োজন।

import { Component, OnInit } from '@angular/core';
import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
import { FlatTreeControl } from '@angular/cdk/tree';

// নোডের ধরণ
export interface TreeNode {
  name: string;
  children?: TreeNode[];
}

// ফ্ল্যাট নোডের ধরণ
export interface FlatTreeNode {
  expandable: boolean;
  name: string;
  level: number;
}

@Component({
  selector: 'app-tree',
  templateUrl: './tree.component.html',
  styleUrls: ['./tree.component.css']
})
export class TreeComponent implements OnInit {
  treeControl: FlatTreeControl<FlatTreeNode>;
  dataSource: MatTreeFlatDataSource<TreeNode, FlatTreeNode>;

  constructor() {
    const treeFlattener = new MatTreeFlattener(
      this.transformer, 
      this.getLevel, 
      this.isExpandable, 
      this.getChildren
    );

    this.treeControl = new FlatTreeControl<FlatTreeNode>(this.getLevel, this.isExpandable);
    this.dataSource = new MatTreeFlatDataSource(this.treeControl, treeFlattener);
  }

  ngOnInit() {
    const TREE_DATA: TreeNode[] = [
      {
        name: 'Fruit',
        children: [
          { name: 'Apple' },
          { name: 'Orange' },
          { name: 'Banana' }
        ]
      },
      {
        name: 'Vegetables',
        children: [
          { name: 'Tomato' },
          { name: 'Lettuce' },
          { name: 'Carrot' }
        ]
      }
    ];

    this.dataSource.data = TREE_DATA;
  }

  // নোডে children এক্সেস করা
  private transformer = (node: TreeNode, level: number) => {
    return {
      expandable: !!node.children && node.children.length > 0,
      name: node.name,
      level: level
    };
  }

  // নোডের স্তর নির্ধারণ করা
  private getLevel = (node: FlatTreeNode) => node.level;

  // নোড এক্সপ্যান্ডেবল কিনা তা চেক করা
  private isExpandable = (node: FlatTreeNode) => node.expandable;

  // নোডের children পাওয়ার জন্য
  private getChildren = (node: TreeNode): TreeNode[] => node.children;
  
  hasChild = (_: number, node: FlatTreeNode) => node.expandable;
}

এখানে:

• MatTreeFlattener: এটি ট্রী ডেটাকে ফ্ল্যাট ফর্ম্যাটে রূপান্তরিত করে, যা পরবর্তীতে ট্রী কন্ট্রোল এবং ডেটা সোর্সের মাধ্যমে প্রদর্শিত হয়।
• FlatTreeControl: এটি ট্রী নোডকে এক্সপ্যান্ড/কলাপ্স কন্ট্রোল করে।
• MatTreeFlatDataSource: এটি ডেটাকে FlatTreeControl এর সঙ্গে যুক্ত করে এবং টেবিলের ডেটা সোর্স তৈরি করে।

ড্র্যাগ-এন্ড-ড্রপ ফিচার ব্যবহার করা

MatTree কম্পোনেন্টে Angular CDK এর ড্র্যাগ-এন্ড-ড্রপ ফিচার ব্যবহারের মাধ্যমে আপনি ট্রী নোডগুলোকে ড্র্যাগ এবং ড্রপ করতে পারবেন। এটি DragDropModule ইমপোর্ট এবং কনফিগারেশনের মাধ্যমে করা যায়।

import { DragDropModule } from '@angular/cdk/drag-drop';

এটি আপনার app.module.ts ফাইলে ইমপোর্ট করুন এবং ট্রী নোডে ড্র্যাগ-এন্ড-ড্রপ কার্যকারিতা যোগ করুন।

Angular Material Tree কম্পোনেন্ট একটি শক্তিশালী এবং কাস্টমাইজযোগ্য উপাদান যা গাছের মতো হায়ারার্কিক্যাল ডেটা প্রদর্শন করতে ব্যবহৃত হয়। এটি ডেটা এক্সপ্যান্ডিং, ড্র্যাগ-এন্ড-ড্রপ, কাস্টম আইকন এবং অন্যান্য ফিচার সমর্থন করে, যা আপনার অ্যাপ্লিকেশনকে আরো ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব করে তোলে। MatTree এর মাধ্যমে আপনি হায়ারার্কিক্যাল ডেটা সহজে ম্যানেজ এবং প্রদর্শন করতে পারেন।

Angular Material এর MatTree কম্পোনেন্ট দুই ধরনের ট্রি প্রদর্শন করতে পারে: ফ্ল্যাট ট্রি (Flat Tree) এবং নেস্টেড ট্রি (Nested Tree)। এই দুই ধরনের ট্রি স্ট্রাকচারের মধ্যে মূল পার্থক্য হল তাদের ডেটার আর্কিটেকচার এবং কীভাবে তারা ব্যবহারকারীর কাছে ডেটা উপস্থাপন করে।

এখানে ফ্ল্যাট ট্রি এবং নেস্টেড ট্রি এর মধ্যে পার্থক্য এবং তাদের ব্যবহারের ক্ষেত্রে সুবিধাগুলি ব্যাখ্যা করা হচ্ছে।

১. ফ্ল্যাট ট্রি (Flat Tree)

ফ্ল্যাট ট্রি হল এমন একটি ডেটা স্ট্রাকচার যেখানে সমস্ত নোডগুলো একটি সোজা লিস্টের মতো থাকে। তবে, প্রতিটি নোডের জন্য একটি level প্রপার্টি থাকে, যা নির্দেশ করে যে নোডটি কোন স্তরে অবস্থান করছে।

বৈশিষ্ট্য:

• সমস্ত ডেটা একটি একক স্তরে ফ্ল্যাট করা হয়।
• প্রতিটি নোডের জন্য একটি expandable প্রপার্টি থাকে, যা নির্দেশ করে যে নোডটির সন্তান আছে কিনা।
• এটি একটি ফ্ল্যাট লিস্ট হিসাবে প্রক্রিয়া করা হয়, যেখানে কোনও children নোড আলাদা ভাবে ডিফাইন করা হয় না।
• MatTreeFlattener এবং MatTreeFlatDataSource ব্যবহার করে ডেটাকে ফ্ল্যাট ট্রি আকারে পরিণত করা হয়।

উদাহরণ:

export interface TreeNode {
  name: string;
  children?: TreeNode[];
}

export interface FlatTreeNode {
  expandable: boolean;
  name: string;
  level: number;
}

এখানে, TreeNode হল মূল ডেটা, এবং FlatTreeNode হল ফ্ল্যাট ট্রি তৈরি করার জন্য প্রক্রিয়াজাত ডেটা।

ব্যবহার:

ফ্ল্যাট ট্রি সাধারণত ব্যবহার করা হয় যেখানে ডেটার স্তর না থাকা বা ডেটার প্রতিটি অংশ একইভাবে হ্যান্ডল করা হয়। এটি সাধারণত এমন পরিস্থিতিতে ব্যবহৃত হয় যেখানে ডেটার হায়ারার্কি সোজা ও সরল হতে হয়।

২. নেস্টেড ট্রি (Nested Tree)

নেস্টেড ট্রি হল একটি ডেটা স্ট্রাকচার যেখানে নোডগুলো তাদের সন্তানদের মধ্যে হায়ারার্কিকালভাবে সাজানো থাকে। প্রতিটি নোডের মধ্যে children প্রপার্টি থাকে, যা তার সন্তানের নোডগুলোকে ধারণ করে।

বৈশিষ্ট্য:

• নোডগুলি স্তরানুক্রমিকভাবে সাজানো হয়, যেখানে একটি নোডের সন্তান (child nodes) আবার তার নিজস্ব সন্তান (sub-child nodes) ধারণ করতে পারে।
• এটি সাধারণত নেস্টেড ডেটার জন্য ব্যবহার করা হয়, যেখানে ডেটার মধ্যে স্পষ্টভাবে সম্পর্কিত স্তরের ব্যবস্থা থাকে।
• MatTree ব্যবহার করে nested nodes ডেটা আর্কিটেকচারে পরিবর্তিত হতে পারে।
• MatTreeNestedDataSource ব্যবহার করে নেস্টেড ট্রি তৈরি করা হয়।

উদাহরণ:

export interface TreeNode {
  name: string;
  children?: TreeNode[];
}

এখানে, children প্রপার্টি দ্বারা একটি নোডের সন্তানের নোডসমূহ নির্ধারিত হচ্ছে।

ব্যবহার:

নেস্টেড ট্রি সাধারণত এমন ক্ষেত্রে ব্যবহার করা হয় যেখানে ডেটা একটি স্পষ্ট স্তরভিত্তিক হায়ারার্কি অনুসরণ করে। যেমন ফাইল সিস্টেম, ডিরেক্টরি স্ট্রাকচার, অথবা ন্যাভিগেশন মেনু যেখানে প্রতিটি সেকশন একটি বা একাধিক উপসেকশন থাকতে পারে।

ফ্ল্যাট ট্রি এবং নেস্টেড ট্রির মধ্যে পার্থক্য

• ফ্ল্যাট ট্রি সাধারণত ব্যবহার করা হয় যখন ডেটা একটি সরল লিস্ট আকারে সংগঠিত থাকে এবং কোনো স্তরের কাঠামো নেই বা কম স্তরের সম্পর্ক রয়েছে।
• নেস্টেড ট্রি বেশি উপযোগী যখন ডেটার মধ্যে স্পষ্ট হায়ারার্কি থাকে, যেমন ফাইল সিস্টেম, মেনু অথবা এমন কোনো স্ট্রাকচার যেখানে নোডের সন্তান নোড থাকতে পারে।

Angular Material এর MatTree কম্পোনেন্টের মাধ্যমে, আপনি উভয় ধরনের ট্রি সহজেই তৈরি করতে পারেন এবং প্রয়োজন অনুযায়ী কাস্টমাইজ করতে পারেন।

Angular Material এ MatTree কম্পোনেন্ট ব্যবহার করে আপনি একটি ডাইনামিক ট্রি তৈরি করতে পারেন, যা ডাটা হায়ারার্কি বা নেস্টেড (nested) ডাটা প্রদর্শন করার জন্য উপযোগী। ডাইনামিক ট্রি তৈরি করার জন্য, Angular Material-এর MatTree এবং MatTreeNode কম্পোনেন্ট ব্যবহার করা হয়।

এটি সাধারণত ডাটা-ড্রিভেন বা ফাইল সিস্টেম লিস্টের মতো ডাটা দেখানোর জন্য ব্যবহার করা হয়। এই কম্পোনেন্টটি ব্যবহারকারীর জন্য একটি সহজ এবং ইনটুইটিভ ট্রি-ভিউ প্রদান করে, যা সহজে নেভিগেট করা যায়।

ডাইনামিক ট্রি তৈরি করার ধাপ

১. প্রয়োজনীয় মডিউল ইমপোর্ট করা

প্রথমে, MatTreeModule এবং MatIconModule আপনার অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে, যাতে আপনি ট্রি এবং আইকন ব্যবহার করতে পারেন।

import { MatTreeModule } from '@angular/material/tree';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
  imports: [
    MatTreeModule,
    MatIconModule
  ]
})
export class AppModule { }

২. ডাটা মডেল তৈরি করা

ডাইনামিক ট্রি তৈরি করতে ডাটা মডেল তৈরি করতে হবে। আমরা একটি nested ডাটা ব্যবহার করবো যেখানে প্রতিটি উপাদান (node) অন্য উপাদান (children) ধারণ করতে পারে।

interface TreeNode {
  name: string;
  children?: TreeNode[];
}

const TREE_DATA: TreeNode[] = [
  {
    name: 'Fruit',
    children: [
      { name: 'Apple' },
      { name: 'Orange' },
      { name: 'Banana' }
    ]
  },
  {
    name: 'Vegetables',
    children: [
      { name: 'Carrot' },
      { name: 'Broccoli' }
    ]
  },
  {
    name: 'Grains',
    children: [
      { name: 'Rice' },
      { name: 'Wheat' }
    ]
  }
];

এখানে, TreeNode ইন্টারফেসে name এবং একটি অপশনাল children অ্যারে দেওয়া হয়েছে, যা শিশু উপাদান (nested nodes) ধারণ করতে পারে।

৩. ডাইনামিক ট্রি কম্পোনেন্ট তৈরি করা

এখন HTML ফাইলে mat-tree কম্পোনেন্ট ব্যবহার করে ট্রি তৈরি করা যাবে। mat-tree এর মাধ্যমে আপনি ট্রী নোড (node) এবং তার চাইল্ড নোড (children) হ্যান্ডেল করতে পারবেন।

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
    <li>
      <div class="mat-tree-node">
        <mat-icon matTreeNodeToggle>expand_more</mat-icon>
        <span>{{ node.name }}</span>
      </div>
    </li>
  </mat-tree-node>

  <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodeToggle>
    <li>
      <div class="mat-tree-node">
        <mat-icon matTreeNodeToggle>expand_more</mat-icon>
        <span>{{ node.name }}</span>
      </div>
      <mat-tree [dataSource]="node.children" [treeControl]="treeControl"></mat-tree>
    </li>
  </mat-tree-node>
</mat-tree>

এখানে:

• mat-tree: এটি ট্রি কম্পোনেন্ট যা ডাটা সোর্স এবং ট্রি কন্ট্রোল নিবে।
• mat-tree-node: এটি ট্রি নোডের জন্য টেমপ্লেট। এখানে *matTreeNodeDef ডিরেকটিভ দ্বারা ট্রি নোডের জন্য একটি উপস্থাপনা সংজ্ঞায়িত করা হয়েছে।
• mat-icon: টুলটিপে আইকন প্রদর্শনের জন্য ব্যবহৃত।
• mat-tree-node-toggle: এটি ট্রি নোডের জন্য টগল অপারেশন সক্রিয় করে (expand এবং collapse)।

৪. ট্রি কন্ট্রোল এবং ডাটা সোর্স সেট করা

Angular এর FlatTreeControl এবং MatTreeFlatDataSource ব্যবহার করে আপনি ট্রি কন্ট্রোল এবং ডাটা সোর্স সেট করবেন।

import { Component } from '@angular/core';
import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
import { FlatTreeControl } from '@angular/cdk/tree';

@Component({
  selector: 'app-tree',
  templateUrl: './tree.component.html',
  styleUrls: ['./tree.component.css']
})
export class TreeComponent {
  treeControl: FlatTreeControl<TreeNode>;
  treeFlattener: MatTreeFlattener<TreeNode, any>;
  dataSource: MatTreeFlatDataSource<TreeNode, any>;

  constructor() {
    this.treeFlattener = new MatTreeFlattener(
      this.transformer,
      this.getLevel,
      this.isExpandable,
      this.getChildren
    );
    this.treeControl = new FlatTreeControl<TreeNode>(this.getLevel, this.isExpandable);
    this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
    this.dataSource.data = TREE_DATA;
  }

  transformer(node: TreeNode, level: number): any {
    return {
      ...node,
      level
    };
  }

  getLevel = (node: any) => node.level;

  isExpandable = (node: any) => !!node.children;

  getChildren = (node: TreeNode): TreeNode[] => node.children;

  hasChild = (_: number, node: TreeNode) => !!node.children;
}

এখানে:

• MatTreeFlattener: এটি মূল ট্রি ডাটা (nested structure) কে ফ্ল্যাট (flat) করে, যার মাধ্যমে আপনি নোডের লেভেল, এক্সপ্যান্ডেবল প্রপার্টি এবং চাইল্ডস সহজে ট্র্যাক করতে পারবেন।
• FlatTreeControl: এটি ট্রি কন্ট্রোল তৈরি করে, যা ট্রি নোডের লেভেল এবং এক্সপ্যান্ডেবল প্রপার্টি হ্যান্ডেল করে।
• MatTreeFlatDataSource: এটি ফ্ল্যাট ডাটা সোর্স তৈরি করে যা MatTree কম্পোনেন্টে ডাটা প্রদান করে।

৫. স্টাইলিং এবং কাস্টমাইজেশন

ট্রির ডিজাইন এবং আউটপুট কাস্টমাইজ করতে CSS বা SCSS ব্যবহার করা যায়। উদাহরণস্বরূপ, ট্রি নোডের স্টাইল পরিবর্তন করা:

.mat-tree-node {
  display: flex;
  align-items: center;
  padding: 5px 10px;
}

.mat-tree-node span {
  margin-left: 8px;
}

.mat-tree-node mat-icon {
  cursor: pointer;
}

এখানে, ট্রি নোডের মধ্যে আইকন এবং টেক্সটের মাঝে মার্জিন এবং প্যাডিং দেয়া হয়েছে, এবং আইকনগুলিকে ক্লিকযোগ্য (pointer) করা হয়েছে।

Angular Material এর MatTree কম্পোনেন্ট ব্যবহার করে ডাইনামিক এবং কাস্টমাইজযোগ্য ট্রি তৈরি করা সম্ভব। এটি আপনার অ্যাপ্লিকেশনে নেস্টেড ডাটা বা হায়ারার্কিক্যাল ডাটা প্রদর্শন করতে সাহায্য করে। Angular Material এর FlatTreeControl এবং MatTreeFlatDataSource ব্যবহার করে আপনি সহজেই ট্রি কন্ট্রোল এবং ডাটা সোর্স কাস্টমাইজ করতে পারেন। CSS বা SCSS ব্যবহার করে আপনি ট্রি কম্পোনেন্টের ডিজাইনও কাস্টমাইজ করতে পারবেন।

Angular Material এর MatTree কম্পোনেন্ট ট্রি ভিউ তৈরি করতে ব্যবহৃত হয়, যেখানে ডেটা একটি কাঠামোবদ্ধ হায়ারার্কির (hierarchical) আকারে প্রদর্শিত হয়। এটি সাধারণত ব্যবহারকারীদের তথ্য নেভিগেশনে সাহায্য করতে ব্যবহৃত হয়, যেমন ফাইল সিস্টেম বা ক্যাটেগরি বায়ানির জন্য। Lazy loading এর মাধ্যমে, বড় ডেটা কাঠামোকে শুধু তখনই লোড করা হয় যখন সেই ডেটার প্রয়োজন হয়, যা অ্যাপ্লিকেশন পারফরম্যান্সে বড় ধরনের উন্নতি নিয়ে আসে।

এই টিউটোরিয়ালে, আমরা দেখব কীভাবে Angular Material এর MatTree কম্পোনেন্টের সাথে লেজি লোডিং কার্যকারিতা ইমপ্লিমেন্ট করা যায়।

লেজি লোডিং ট্রি নোড ব্যবহার করা

Angular Material এর MatTree কম্পোনেন্ট ট্রি নোড লোড করতে FlatTree বা NestedTree ব্যবহার করতে পারে। লেজি লোডিং ট্রি নোড সাধারণত NestedTree এর মাধ্যমে ব্যবহৃত হয়, যেখানে শিশুর নোডগুলো ক্লিক করার পর লোড হয়।

১. মডিউল ইমপোর্ট করা

প্রথমে MatTreeModule এবং MatIconModule ইমপোর্ট করতে হবে।

import { MatTreeModule } from '@angular/material/tree';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { NgModule } from '@angular/core';

@NgModule({
  imports: [
    MatTreeModule,
    MatIconModule,
    MatButtonModule
  ]
})
export class AppModule {}

২. লেজি লোডিং ট্রি নোডের জন্য ডেটা উৎস তৈরি করা

লেজি লোডিং ট্রি নোডের জন্য ডেটা উৎস তৈরি করতে হবে। উদাহরণস্বরূপ, একটি TreeControl এবং DataSource তৈরি করা হয় যা ডেটার লেজি লোডিং পরিচালনা করবে।

import { Component } from '@angular/core';
import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
import { FlatTreeControl } from '@angular/cdk/tree';

interface ExampleNode {
  name: string;
  children?: ExampleNode[];
}

@Component({
  selector: 'app-tree',
  templateUrl: './tree.component.html',
  styleUrls: ['./tree.component.css']
})
export class TreeComponent {
  treeControl: FlatTreeControl<any>;
  treeFlattener: MatTreeFlattener<any, any>;
  dataSource: MatTreeFlatDataSource<any, any>;

  constructor() {
    const transformer = (node: ExampleNode, level: number) => ({
      expandable: !!node.children && node.children.length > 0,
      name: node.name,
      level
    });

    this.treeFlattener = new MatTreeFlattener(transformer, node => node.level, node => node.expandable, node => node.children);
    this.treeControl = new FlatTreeControl<any, any>(node => node.level, node => node.expandable);
    this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
  }

  // লেজি লোডিং ফাংশন
  getChildren(node: ExampleNode): ExampleNode[] {
    return node.children ? node.children : [];
  }

  hasChild = (_: number, node: any) => node.expandable;
}

এখানে:

• MatTreeFlattener: এটি একটি ট্রি নোডকে ফ্ল্যাট (level এবং expandable এর মাধ্যমে) করতে ব্যবহৃত হয়।
• FlatTreeControl: এটি ট্রি নিয়ন্ত্রণ করতে ব্যবহৃত হয়, যেমন এক্সপ্যান্ড বা কোলাপ্স করা।
• MatTreeFlatDataSource: এটি ডেটা সোর্সের মাধ্যমে ডেটা সন্নিবেশিত করে।

৩. HTML টেমপ্লেট তৈরি করা

এখন HTML টেমপ্লেটে ট্রি ভিউটি দেখানোর জন্য কোড লিখতে হবে।

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
    <button mat-icon-button disabled></button>
    {{node.name}}
  </mat-tree-node>

  <mat-tree-node *matTreeNodeDef="let node; when: hasChild">
    <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
      <mat-icon class="mat-icon-rtl-mirror">
        {{treeControl.isExpanded(node) ? 'expand_less' : 'expand_more'}}
      </mat-icon>
    </button>
    {{node.name}}
  </mat-tree-node>
</mat-tree>

এখানে:

• mat-tree: এটি MatTree কম্পোনেন্টের মূল কন্টেইনার।
• mat-tree-node: এটি ট্রি নোডের জন্য ব্যবহার করা হয়, যা পিতামাতার নোড এবং শিশুর নোড আলাদা করে।
• matTreeNodeToggle: এটি টগল ফাংশনালিটি যুক্ত করে, যা ব্যবহারকারীর ক্লিকের মাধ্যমে ট্রি নোড এক্সপ্যান্ড বা কোলাপ্স করে।

৪. লেজি লোডিং অ্যাপ্লিকেশন

এখন আপনি লেজি লোডিং ইমপ্লিমেন্ট করতে getChildren ফাংশন ব্যবহার করতে পারেন, যা পিতামাতার নোডের ক্লিক করার পর শুধুমাত্র সেই নোডের শিশুদের লোড করবে।

// লেজি লোডিং ফাংশন
getChildren(node: ExampleNode): ExampleNode[] {
  if (!node.children) {
    node.children = this.loadData(node.name); // লোড ডেটা
  }
  return node.children;
}

// ডেটা লোড করার জন্য একটি সিম্পল ফাংশন
loadData(parentName: string): ExampleNode[] {
  // এখানে API কল বা স্ট্যাটিক ডেটা লোড করা যেতে পারে
  return [
    { name: `${parentName} Child 1` },
    { name: `${parentName} Child 2` },
  ];
}

এখানে, getChildren ফাংশনটি শুধুমাত্র তখনই শিশু নোড লোড করবে যখন পিতামাতা নোডটি ক্লিক করা হবে, যা লেজি লোডিং এর ধারণা অনুসরণ করে।

MatTree কম্পোনেন্টের মাধ্যমে Angular Material এ লেজি লোডিং ট্রি নোড তৈরি করা সহজ এবং কার্যকরী। FlatTree এবং NestedTree এর মাধ্যমে আপনি ডেটা কাঠামোকে দক্ষভাবে ম্যানেজ করতে পারেন। লেজি লোডিং দ্বারা শুধুমাত্র প্রয়োজনীয় ডেটা লোড হয়, যা পারফরম্যান্স উন্নত করতে সহায়তা করে। MatTree কম্পোনেন্টে লেজি লোডিং কার্যকারিতা ইমপ্লিমেন্ট করে, আপনি বড় ডেটাসেট পরিচালনা করতে পারেন, যাতে ব্যবহারকারীরা দ্রুত এবং সহজভাবে অ্যাপ্লিকেশনের ট্রি ডেটা দেখতে পায়।